/**
 * 抓拍机参数设置
 */

import { FC, useState } from "react"
import { VideoBox } from "../../style"
import { Button, message, Modal, Image } from "antd"
import { getYckzZyLoadControlCatchPicture } from "../../../api"
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider"
const CatchSet: FC<{
    open: boolean;
    handleCallBack: () => void
    catchId?: string;

}> = ({
    open,
    handleCallBack,
    catchId
}) => {
        const [newImg, setNewImg] = useState<string>('')
        const [imgUrl, setImgUrl] = useState<string[]>([]);


        const handleShootCancel = async () => {
            setImgUrl([])
            setNewImg('');
            handleCallBack();
        }

        const handleCatchPicture = async () => {
            if (catchId) {
                const { code, msg, data } = (await getYckzZyLoadControlCatchPicture({
                    catchId: catchId,
                })) as {
                    code: number
                    msg: string
                    data: string
                }
                if (code === 20000) {
                    message.success("抓拍成功")
                    setImgUrl([...imgUrl, data])
                    setNewImg(data)

                } else {
                    message.error(msg)
                }
            } else {
                message.warning('请先设置相机参数')
            }

        }
        return (
            <Modal
                title="抓拍测试"
                open={open}
                onCancel={handleShootCancel}
                getContainer={false}
                width={useWindowFontSize(534)}
                footer={[
                    <Button key="back" onClick={handleShootCancel}>
                        关闭
                    </Button>,
                ]}
            >
                {newImg ? <div style={{ marginBottom: '2rem' }}>
                    <Image
                        style={{ width: '46rem', height: '23.5rem' }}
                        src={newImg}
                    />
                </div> : <div style={{ width: '100%', height: '23.5rem', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '3rem' }}>
                    <div>暂无抓拍图片</div>
                </div>}
                <VideoBox>
                    <div className="btn">
                        <Button type="primary" onClick={() => { handleCatchPicture() }}>点击抓拍</Button>
                    </div>
                    {
                        imgUrl.length > 0 && <div className="imgBox">
                            <div className="title">抓拍照片</div>
                            <div className="main">
                                {
                                    imgUrl.map((item: string, index: number) => {
                                        return (
                                            <div key={index} className="mainbox">
                                                <Image
                                                    style={{ width: '13rem' }}
                                                    src={item}
                                                />
                                            </div>

                                        )
                                    })
                                }
                            </div>
                        </div>
                    }


                </VideoBox>
            </Modal>

        )
    }

export default CatchSet